<template>
  <!-- 队列管理-轻渠道队列列表-页面 -->
  <section class="page">
    <data-form :model="queryModel" @onSearch="refreshData" :page="pageService" :rules="rules">
      <template slot="inputs">
        <el-form-item label="队列名称" prop="queueName">
          <el-input v-model.trim="queryModel.queueName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <el-input v-model.trim="queryModel.queueCode" :maxlength="20"></el-input>
        </el-form-item>
        <!-- <el-form-item label="渠道类型" prop="channelCategory">
          <el-select v-model="queryModel.channelCategory" size="small">
            <el-option v-for="{index,name,code} in $dict.getDictData('ChannelCategory')" :key="index" :label="name" :value="code">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="队列状态" prop="status">
          <el-select v-model="queryModel.status" size="small">
            <el-option
              v-for="{ index, name, code } in $dict.getDictData('CommonState')"
              :key="index"
              :label="name"
              :value="code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改人" prop="updateName">
          <el-input v-model.trim="queryModel.updateName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="复核人员" prop="reviewer">
          <el-input v-model.trim="queryModel.reviewer" :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>

    <data-box
      :data="queueDataSet"
      @onPageChange="refreshData"
      :page="pageService"
    >
      <template slot="buttons">
        <el-button @click="addQueue">新增队列</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="showOrEditQueue(scope.row.id, true, false)"
              >查看</el-button
            >
            <el-button
              :disabled="['PENDING'].includes(scope.row.channelStatus)"
              type="text"
              size="small"
              @click="showOrEditQueue(scope.row.id, false, true)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="queueCode"
          label="队列代码"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="queueName"
          label="队列名称"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="队列状态"
          :formatter="
            row => $filter.dictConvert(row.status, 'CommonState')
          "
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="relationship"
          label="发送对象"
          :formatter="
            row => $filter.dictConvert(row.relationship, 'Relationship')
          "
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="发送时间"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              class="model"
              v-for="(item, index) in scope.row.channelSettingSet"
              :key="index"
            >
              {{ $filter.dictConvert(item.sendType, "SendType")
              }}{{ item.days }}天
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="发送渠道"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              class="model"
              v-for="(item, index) in scope.row.channelSettingSet"
              :key="index"
            >
              {{ $filter.dictConvert(item.sendChannel, "SendChannel") }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="模板名称"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              class="model"
              v-for="(item, index) in scope.row.channelSettingSet"
              :key="index"
            >
              {{ index }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="updateName"
          label="修改人"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          :formatter="row => $filter.dateTimeFormat(row.updateTime)"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="reviewer"
          label="复核人员"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="reviewerDate"
          label="审批时间"
          :formatter="row => $filter.dateTimeFormat(row.reviewerDate)"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="注记"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="队列修改记录"
          :min-width="$helper.getColumnWidth(4)"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="openUpdateLog(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--新增队列弹出框-->
    <el-dialog
      :title="dialog.title1"
      :center="true"
      :visible.sync="dialog.add"
      width="1100px"
      @open="$nextTick(() => $refs['add-queue'].reset())"
      :close-on-press-escape="false"
    >
      <add-pithy-queue
        :readOnly="readOnly"
        :queueId="queueId"
        :edit="edit"
        @close="dialog.add = false"
        @refreshList="refreshData"
        ref="add-queue"
      ></add-pithy-queue>
    </el-dialog>
    <!--队列修改记录弹出框-->
    <el-dialog
      title="队列修改记录"
      :center="true"
      :visible.sync="dialog.openUpdateLog"
      width="1100px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <queue-modify-log
        :queueId="queueId"
        :pithyFlag="pithyFlag"
        @openDetail="
          queueId => {
            showOrEditQueue(queueId, true, false);
          }
        "
        @close="dialog.openUpdateLog = false"
        @refreshList="refreshData"
        ref="queue-update-log"
      ></queue-modify-log>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";

import { QueueLightService } from "~/services/domain-service/queue-light.service";
import AddPithyQueue from "~/components/queue-manage/add-pithy-queue.vue";
import QueueModifyLog from "~/components/queue-manage/queue-modify-log.vue";
import { Prop } from "vue-property-decorator"; 

@Layout("workspace")
@Component({
  components: {
    AddPithyQueue,
    QueueModifyLog
  }
})
export default class PithyQueueList extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(QueueLightService)
  private queueLightService: QueueLightService;
  private queueId = "";
  private readOnly = false;
  private edit = false;
  private queryModel: any = {
    queueName: "",
    queueCode: "",
    channelCategory: "",
    status: "",
    updateName: "",
    reviewer: ""
  };
  private rules: any = {
    queueCode: [
      { required: false, message: '请输入队列代码', trigger: 'blur' },
      { pattern: /^[A-Za-z0-9]+$/, message: "请输入英文字母或数字", trigger: "blur" }
    ],
  };
  private queueDataSet: any[] = [];
  private dialog: any = {
    add: false,
    openUpdateLog: false,
    title1: ""
  };
  private pithyFlag = false;
  private mounted() {
    this.refreshData();
  }
  private refreshData() {
    this.queueLightService
      .getAll(this.queryModel, this.pageService, {})
      .subscribe(data => {
        this.queueDataSet = data;
        data.map(item => {
          item.updateTime = item.timeModified;
        });
      });
  }

  //打开新增队列弹框
  private addQueue() {
    this.queueId = "";
    this.readOnly = false;
    this.edit = false;
    this.dialog.add = true;
    this.dialog.title1 = "新增队列";
  }

  //查看队列详情,编辑队列
  private showOrEditQueue(queueId, readOnly, edit) {
    this.queueId = queueId;
    this.pithyFlag = true;
    this.readOnly = readOnly;
    this.edit = edit;
    this.dialog.add = true;
    this.dialog.title1 = edit ? "编辑队列" : "查看队列";
    this.$nextTick(() => {
      const addQueue: any = this.$refs["add-queue"];
      addQueue.queueIdChange(this.queueId);
    });
  }

  //停用队列
  private disableQueue(row) {
    this.$confirm(
      `您确定要${row.channelStatus === "ON" ? "停用" : "启用"}该队列吗？`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    ).then(() => {
      this.queueLightService.updateStatus({ id: row.id }).subscribe(
        data => {
          this.$message.success(
            `${row.channelStatus === "ON" ? "停用" : "启用"}成功`
          );
          this.refreshData();
        },
        ({ msg }) => {}
      );
    });
  }

  //打开队列修改记录弹框
  private openUpdateLog(row) {
    this.dialog.openUpdateLog = true;
    this.pithyFlag = true;
    this.queueId = row.id;
    this.$nextTick(() => {
      const queueUpdateLog: any = this.$refs["queue-update-log"];
      queueUpdateLog.reset();
    });
  }
}
</script>

<style lang="less">
.model {
  line-height: 20px;
  border-bottom: 1px solid #ebeef5;
  &:last-child {
    border-bottom: none;
  }
}
</style>
